<% content_for :head do %>
  <meta name="turbolinks-cache-control" content="no-cache">
<% end %>

<% provide(:head_title, t("users.settings.teams.head_title")) %>
<% provide(:container_class, "no-second-nav-container") %>

<div data-hook="team-beginning"></div>

<%= render partial: "users/settings/sidebar.html.erb" %>
<div class="tab-content">
  <div class="tab-pane content-pane" role="tabpanel"></div>
  <div class="tab-pane content-pane active team-settings-pane" role="tabpanel">

    <%= render partial: "users/settings/teams/breadcrumbs.html.erb" %>

    <!-- TITLE -->
    <h1 id="team-name" class="settings-team-name" data-current-team="<%= current_team == @team %>">
      <% if can_update_team?(@team) %>
        <%= render partial: "shared/inline_editing",
                   locals: {
                     initial_value: @team.name,
                     config: {
                       field_to_udpate: 'name',
                       params_group: 'team',
                       path_to_update: update_team_path(@team, format: :json)
                     }
                   } %>
      <% else %>
        <span class="view-mode"><%= @team.name %></span>
      <% end %>
    </h1>
    <!-- End of TITLE -->

    <!-- HEADER -->
    <div class="team-metadata">

      <div class="created-at grid-block">
       <span class="fas fa-calendar-alt"></span>
       <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_at") %></span>
       <b><%= l(@team.created_at, format: :full_date) %></b>
      </div>

      <div class="created-by grid-block">
        <span class="fas fa-user fa-lg"></span>
        <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_by") %></span>
        <b>
          <%= t('users.settings.teams.edit.header_created_by_name_email', name: @team.created_by.full_name, email: @team.created_by.email) if @team.created_by %>
        </b>
      </div>

      <div class="space-usage grid-block">
        <span class="fas fa-hdd"></span>
        <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_space_taken") %></span>
        <b data-hook="team-space-taken"><%= "#{number_to_human_size(@team.storage_used)}" %></b>
      </div>
    </div>

    <div class="team-description">
      <% if can_update_team?(@team) %>
        <div
          class="inline-init-handler"
          data-field-to-update="description"
          data-params-group="team"
          data-path-to-update="<%= update_team_path(@team, format: :json) %>"
          data-original-name="<%= sanitize_input(@team.description) %>"
        >
          <div class="view-mode" data-placeholder="<%= t("users.settings.teams.show.enter_description") %>"><%= sanitize_input(@team.description) %></div>
          <textarea placeholder="<%= t("users.settings.teams.show.enter_description") %>" class="hidden input-field smart-text-area" type="text" value="<%= sanitize_input(@team.description) %>" disabled><%= sanitize_input(@team.description) %></textarea>
          <div class="button-container">
            <span class="cancel-button inline-field-button"><%= t('general.cancel') %></span>
            <span class="save-button inline-field-button"><%= t('general.save') %></span>
          </div>
        </div>
      <% else %>
        <span class="view-mode disable-select"><%= @team.description.empty? ? t('users.settings.teams.edit.header_no_description') : sanitize_input(@team.description)  %></span>
      <% end %>
    </div>
    <!-- End of HEADER -->

    <!-- USERS TABLE -->
    <div class="users-datatable">
      <% if can_invite_team_users?(@team) %>
        <div id="add-new-team-members-button" class="hidden">
          <a href="#" class="btn btn-primary" data-trigger="invite-users" data-turbolinks="false" data-modal-id="team-invite-users-modal">
            <span class="fas fa-plus"></span>
            <%= I18n.t('users.settings.teams.edit.add_user') %>
          </a>
        </div>
        <%= render(partial: 'shared/invite_users_modal.html.erb',
                   locals: { modal_id: 'team-invite-users-modal',
                             type: 'invite_to_team',
                             team: @team } ) %>
      <% end %>
      <table id="users-table" class="table" data-source="<%= team_users_datatable_path(@team, format: :json) %>">
        <thead>
          <tr>
            <th id="user-name"><%= t("users.settings.teams.edit.thead_user_name") %></th>
            <th id="email"><%= t("users.settings.teams.edit.thead_email") %></th>
            <th id="user-role"><%= t("users.settings.teams.edit.thead_role") %></th>
            <th id="joined-on"><%= t("users.settings.teams.edit.thead_joined_on") %></th>
            <th id="status"><%= t("users.settings.teams.edit.thead_status") %></th>
            <th id="options"><%= t("users.settings.teams.edit.thead_actions") %></th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <!-- End of USERS TABLE -->

    <div data-hook="team-the-end"></div>

  </div>
</div>

<%= render partial: 'users/settings/teams/description_modal.html.erb' %>
<%= render partial: 'users/settings/teams/destroy_modal.html.erb', locals: { team: @team } %>
<%= render partial: 'users/settings/user_teams/destroy_user_team_modal.html.erb' %>
<%= stylesheet_link_tag 'datatables' %>
<%= javascript_include_tag 'users/settings/teams/show' %>
<span data-hook="team-bottom"></span>
